<template>
  <page-layout>
    <div slot="toolbar">
      <el-button size="small" round type="primary" @click="newClazz">新增分类</el-button>
    </div>
    <div class="card-header">分类管理</div>
    <el-card class="box-card ">
          <el-table
            :data="departCategories" border stripe
            highlight-current-row row-class-name="link">
            <el-table-column
              prop="id"
              label="编号"
              width="55">
            </el-table-column>
            <el-table-column
              prop="name"
              label="分类"
              width="280">
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="deleteClass(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
    </el-card>
    <el-dialog :visible.sync="showQuestionClassEditor" title="添加/编辑 练习题" width="50%">
      <clazz-editor @close="onQuestionClassEditorClose"  :is-close="showQuestionClassEditor"></clazz-editor>
    </el-dialog>
  </page-layout>
</template>
<script>
import PageLayout from "@/components/page-layout";
import ClazzEditor from "./clazz-editor";
import { mapGetters } from "vuex";

export default {
  created() {
    this.getPageChange();
  },
  mounted() {},
  data() {
    return {
      showQuestionClassEditor: false
    };
  },
  computed: {
    ...mapGetters({
      departCategories: "departCategories"
    })
  },
  methods: {
    newClazz() {
      this.showQuestionClassEditor = true;
      this.$store.commit("INIT_CURRENT_DEPART_CATEGORY");
    },
    getPageChange() {
      this.$store.dispatch("getDepartCategories").then(ret => {});
    },
    onQuestionClassEditorClose() {
      this.showQuestionClassEditor = false;
      this.getPageChange();
    },
    deleteClass(row) {
      this.$confirm("确认删除当前企业分类?", "提示", {})
        .then(() => {
          this.$store
            .dispatch("deleteDepartCategories", { categoryId: row.id })
            .then(ret => {
              this.getPageChange();
              this.$notify({
                title: "删除成功",
                type: "success"
              });
            });
        })
        .catch(() => {});
    }
  },
  components: {
    PageLayout,
    ClazzEditor
  }
};
</script>
<style scoped>
</style>
